<template>
	<view class="index">
		<block v-if="shopInfo.id">
			<!-- 轮播图 -->
			<view class="banner">
				<swiper  :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item,index) in shopInfo.imgSrc" :key="index">
						<view class="swiper-item">
							<image :src="item" lazy-load="true" mode="widthFix"></image>
						</view>
					</swiper-item>
					
				</swiper>
			</view>
			
			<view class="shop-info">
				<view class="logo">
					<image :src="shopInfo.logo_image" mode=""></image>
				</view>
				<view class="number">
					<view class="goods-number">{{shopInfo.goods_number}}</view>
					<view class="name">全部宝贝</view>
				</view>
				<button type="default" class="code" open-type="share" hover-class="none">
					<view class="iconfont icon-erweima"></view>
					<view class="name">二维码</view>
					
				</button>
			</view>
			
			<goods-list :goods="goodsList" title="" showType="2"></goods-list>
		</block>
		<view v-else class="no-data">
			您的店铺暂未开通，购买指定会员商品才能开通店铺！
		</view>
	</view>
</template>

<script>
	import Request from '../../common/request.js';
	import goodsList from '../../components/goods-list.vue';
	import banner from '../../components/banner.vue';
	
	export default {
		components: {
			goodsList, banner
		},
		data() {
			return {
				shopInfo: [],
				goodsList: [],
				page: 1,
				nextPage: true,
				providerList: [],
				id: ''
			};
		},
		onLoad(options) {
			console.log('usershop data');
			console.log(options);
			if(options.rUserId) {
				uni.setStorageSync('recommendId', options.rUserId)
			}
			this.id = options.id;
			this.getShopInfo();
		},
		onShareAppMessage() {
			return {
				title: this.shopInfo.shop_name,
				path: '/pages/usershop/shop?id='+this.shopInfo.id+'&rUserId='+this.shopInfo.user_id,
			}
		},
		
		onPullDownRefresh() {
			this.getShopInfo(()=>{
				uni.stopPullDownRefresh()
			})
		},
		
		onReachBottom() {
			this.getGoods();
		},
		methods: {
			//获取店铺信息
			getShopInfo(callback) {
				var that = this;
				var params = {
					url: 'usershop/index',
					sCallback: function(res){
						if(res.data.id) {
							that.shopInfo = res.data;
							
							that.getGoods();
						}
						callback && callback();
					}
				}
				
				Request.send(params);
			},
			//获取店铺商品
			getGoods () {
				var that = this;
				if(this.nextPage == false) {
					return ;
				}
				
				var params = {
					url: 'usershop/getShopGoods',
					data: {shop_id: that.shopInfo.id},
					sCallback: function(res) {
						that.goodsList = that.goodsList.concat(res.data);
						that.page ++;
						if(res.data.length < 20) {
							that.nextPage = false;
						}
					}
				}
				
				Request.send(params)
			}
		}
	}
</script>

<style>
	/* 轮播图开始*/
		.banner swiper{
			width: 100%;
			height: 400upx;
		}
		.banner .swiper-item image{
			width: 750upx;
			height: 400upx;
		}
	/* 轮播图结束 */
	
	.shop-info{
		display: flex;
		width: 100%;
		align-items: center;
		text-align: center;
		background: #fff;
		padding: 40upx 0;
		font-size: 28upx;
		color: #666;
		margin-bottom: 10upx;
	}
	
	.shop-info>view{
		flex: 1;
		border-left: 1upx solid #eee;
	}
	
	.shop-info .logo{
		position: relative;
		
	}
	
	.shop-info .logo image{
		width: 150upx;
		height: 150upx;
		position: absolute;
		top: -120upx;
		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 8;
	}
	
	.shop-info .code{
		margin: 0;
		padding: 0;
		border: none;
		background: none;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-left: 1upx solid #eee;
		flex: 1;
		color: #666;
	}
	
	.shop-info .code:after{
		border: none;
	}
</style>
